Вы - -й посетитель этой странички 

Транспортная задача

А.И. Сенокосов, г. Екатеринбург

От автора

    Уважаемые коллеги! Возможно, некоторые из вас помнят экспериментальный учебник "Виртуальная школа-7", опубликованный в нашей газете в 1999 году. Его основная идея заключалась в том, что весь школьный курс информатики (с 7-го по 11-й классы) можно представить, как курс по разработке web-страничек.
   На сегодняшний день можно говорить о том, что эта идея вполне доказала свою жизнеспособность, а "Виртуальная школа-7" вот уже четвертый год является действующим учебником для семиклассников нашей школы. В следующем году он выходит в издательстве "Просвещение", правда, под названием "Школьный практикум по работе в Интернете". Немногие отклики, которые были получены автором на этот учебник, содержали, в частности, вопросы о соответствии образовательного минимума и материала, представленного в книге. В частности, справедливо отмечалось, что в курсе компьютерной грамотности почему-то отсутствуют электронные таблицы и базы данных.
   На самом деле элементарные представления и об электронных таблицах, и о базах данных даются школьникам в следующих классах. Так, с электронной таблицей учащиеся знакомятся в восьмом классе на примере "транспортной задачи", описанной, например, в [1] или [2]. Но при этом восьмиклассники не используют стандартную электронную таблицу (например, Microsoft Excel), а создают (программируют) свою собственную, помещая ее на одну из своих страничек школьного Интранета. Таким образом, эта статья может рассматриваться как прообраз главы нового учебника "Виртуальная школа-8".
   У нас есть веские основания считать, что создание собственной электронной таблицы позволяет сформировать у школьников четкое представление об устройстве и принципах работы этого программного обеспечения. И в дальнейшем, при обзорном знакомстве с Microsoft Excel, ни у кого не возникает никаких сложностей с освоением ее функциональных возможностей.
   Сделаем еще несколько предварительных методических замечаний.
   К этому моменту ученики уже имеют несколько своих HTML-страничек в школьном Интранете, они знают, как организовать таблицу на страничке, и за их плечами уже две простенькие программы на языке JavaScript: интерактивная смена картинок и калькулятор.
   Сама транспортная задача занимает два урока теории и два - практики. На первом уроке теории дается понятие о том, что такое электронная таблица, ставится задача и описывается таблица для ее решения. На практическом занятии создается новая страничка с электронной таблицей.
   На втором уроке теории обсуждается JavaScript-программа для решения поставленной задачи. Здесь же еще раз акцентируется внимание на правилах ее написания, на объектах и их свойствах. Кроме того, в качестве дополнительного задания для более сильных учащихся вводится новый объект-контейнер <td id=:></td> и объясняется его свойство innerText. А для того чтобы таблица работала, как настоящая электронная таблица, описывается событие OnBlur.
   На втором уроке практики школьники завершают работу над электронной таблицей и решают с ее помощью транс- портную задачу. Более сильные учащиеся, кроме того, могут модернизировать свою таблицу так, чтобы она выглядела до определенной степени даже лучше настоящей и осуществляла автоматический перерасчет.
   Здесь мы опустим теоретическую часть, посвященную электронным таблицам, поскольку она ничем принципиально не отличается от [1] или [2], и перейдем непосредственно к формулировке задачи и ее решению.
   Перед диспетчером транспортной компании встала непростая задача. Три грузовика компании должны забрать с разных предприятий Екатеринбурга различные партии груза и доставить его в Тюмень (см. таблицу). Грузоподъемность каждой машины - 12 тонн, и хотелось бы распределить весь груз примерно поровну. Ну, быть может, допустив 100-150 кг перегрузки какого-нибудь грузовика. И в этом случае диспетчеру поможет электронная таблица. Как обычно, постараемся понять связь между строками и столбцами. В данном случае она заключается в том, сколько единиц данного груза (упаковок, штук, ящиков) берет конкретная автомашина.
    Есть и еще одна тонкость. Решите-ка такую задачку: На складе было 11 станков. Четыре увез первый грузовик. Три - второй. А остальное увез третий. Спрашивается: сколько станков увез третий грузовик? Что, задачка для первого класса? Ну так пусть компьютер сам ее и решает. А для этого необходимо заполнить подвальный этаж столбца, соответствующего третьему грузовику.
    Ну и, разумеется, требуется заполнить подвальный этаж нижней строки, которая контролирует загрузку каждой из машин. Но прежде всего давайте создадим страничку с самой таблицей размером 8 строк на 6 столбцов. Описание самой таблицы и первой строки в ней выглядит самым обычным образом:
<table border="1">
<tr><td>Наименование</td>
<td>Количество</td>
<td>Вес единицы</td>
<td>1-й грузовик</td>
<td>2-й грузовик</td>
<td>3-й грузовик</td>
</tr>
    Некоторые проблемы возникают уже со второй строкой. Начнем:
<tr>
<td>Станки </td>
    А вот следующая ячейка уже будет участвовать в расчете общего веса груза. Стало быть, нужно поместить в нее объект и далее в программе ссылаться на его свойства. Давайте в качестве такого объекта выберем уже известное вам поле для ввода информации <input type="text" :>. Параметр type="text" можно опустить, в результате чего получим следующее:
<td><input size="6" name="kolvo1" value=11></td>
    Мы использовали здесь свойство value, поскольку в это поле не предполагается вводить информацию, а его содержимое - количество станков - будет использовано для дальнейших расчетов. Точно так же описываем вторую ячейку:
<td><input size="6" name="ves1" value=850></td>
    Что же касается остальных трех ячеек второй строки, то в них предполагается вводить информацию:
<td> <input size="6" name="k11"></td>
<td> <input size="6" name="k12"></td>
<td> <input size="6" name="k13"></td>
</tr>
    Заметьте, что при наименовании полей в ячейках, в которые будет занесено количество того или иного груза, мы вначале написали номер груза, а затем - номер машины.
    Следующие пять строк будут похожими на вторую, только не забудьте присвоить ячейкам разные имена. Для примера приведем описание еще и третьей строки:
<tr>
<td>Трубы (уп.)</td>
<td><input size="6" name="kolvo2" value=4></td>
<td><input size="6" name="ves2" value=1930></td>
<td><input size="6" name="k21"></td>
<td><input size="6" name="k22"></td>
<td><input size="6" name="k23"></td>
</tr>
    Последняя строка - особенная. Она служит для отображения рассчитанного веса в каждой из машин. Давайте в нее же поместим кнопку, при нажатии на которую будет произведен этот перерасчет:
<tr>
<td><input type="button" value="Перерасчет" OnClick="raschet()"></td>
<td></td>
<td>Вес груза в машине:</td>
<td><input size="6" name="r1"></td>
<td><input size="6" name="r2"></td>
<td><input size="6" name="r3"></td>
</tr>
Не забудьте закрыть контейнер таблицы: </table>
    Если вы все сделали правильно, то таблица будет выглядеть примерно следующим образом:

    Второй частью нашей работы станет проектирование и написание программы, которая превратит нашу страничку в полноценную электронную таблицу, помогающую решить транспортную задачу.
    Организуем на страничке контейнер для размещения программы на языке JavaScript. Ее начало будет выглядеть следующим образом:
<html>
<head>
<title>
</title>
<script language="javascript">
function raschet()
{
}
</script>
</head>
<body>...
    Проще всего разобраться с последним, третьим, столбцом. Значения в его ячейках будут вычисляться с помощью следующих операторов (напомним, что они располагаются внутри фигурных скобок):
k13.value=kolvo1.value-k11.value-k12.value;
k23.value=kolvo2.value-k21.value-k22.value;
таким же образом записываются и оставшиеся четыре оператора.
    Не торопитесь записывать следующие операторы. Проверьте, правильно ли работают те шесть, которые перерасчитывают загрузку третьего грузовика. Отладьте вашу программу и лишь затем переходите к ее завершающей части.
    Вы уже наверняка знаете, как рассчитать вес груза на первой машине. Надо количество первого груза в машине умножить на его вес, добавить к этому количество второго груза в этой же машине, умноженное на его вес, и т.д. Оператор, соответствующий этому процессу, приведен ниже:
r1.value=k11.value*ves1.value+
k21.value*ves2.value+k31.value*ves3.value+
k41.value*ves4.value+k51.value*
ves5.value+k61.value*ves6.value;
    Надеемся, для вас не составит труда написать оставшуюся пару операторов и отладить программу теперь уже целиком. А под конец используйте-таки вашу таблицу для решения транспортной задачи и распределите груз между машинами примерно поровну.

Для дополнительного чтения

    Конечно, наша электронная таблица выглядит не очень-то профессионально: во-первых, поля количества и веса груза никак не защищены от ввода, а во-вторых, настоящая электронная таблица по умолчанию пересчитывает значения в ячейках, не дожидаясь нажатия на специальную кнопочку. Улучшить нашу таблицу достаточно просто, но для этого необходимо познакомиться с новым объектом.
    Оказывается, контейнер <td></td> может быть объектом, иметь специфические свойства и реагировать на действия.
  Итак, вместо
  <td><input size="6" name="kolvo1" value=11></td>
  запишем:
  <td id="kolvo1">11</td>
    Сразу после этого вместо поля для ввода в ячейке появится обычное число 11, которое при решении транспортной задачи изменить уже невозможно. Очевидно, такими же необходимо сделать все оставшиеся ячейки второго, третьего и шестого столбцов. У вас наверняка возник вопрос: каким же образом можно обратиться к содержимому такой ячейки-объекта в программе на языке JavaScript?
    Оказывается, у этого объекта есть свойство - innerText. Так, при расчете данных для последнего столбца необходимо вместо
  k13.value=kolvo1.value-k11.value-k12.value;
  записать оператор:
  k13.innerText=kolvo1.innerText-k11.value-k12.value;
    Видимо, вы уже догадались, как изменятся операторы, рассчитывающие груз в машинах. Теперь осталось последнее. Как сделать автоматический перерасчет при изменении данных в ячейках четвертого и пятого столбцов?
    Для этого необходимо знать о событии OnBlur, происходящем тогда, когда из поля для ввода убирается текстовый курсор. Событие сработает, даже если в поле ничего не менялось. Значит, для автоматического перерасчета необходимо вместо описания
  <td><input size="6" name="k21"></td>
  записать
  <td><input size="6" name="k21" OnBlur="raschet()"></td>
    Правда, пока вы не уберете текстовый курсор из поля, перерасчет не произойдет. Впрочем, в настоящей электронной таблице после изменения данных для этого тоже необходимо нажать клавишу << . Надеемся, у вас получится этот почти профессиональный вариант электронной таблицы: Желаем успешной работы.

Вопросы и задания

Литература